想有個左右滑動換頁的效果
查詢到view pager可以做到此功能,不過現在官方好像建議使用viewPage2
實際用android studio 4.0 component搜尋也只有出現view pager2

ViewPager2

dependencies

implementation 'com.google.android.material:material:1.1.0'
implementation "androidx.viewpager2:viewpager2:1.0.0"

接着將viewpager2加入activity.xml中

這個屬性可設置滑動方向

android:orientation="horizontal"

FragmentStateAdapter

滑動的頁面爲fragment,例如我們想要3個頁面
就新增3個fragment,FirstFragment(),SecondFragment(),ThirdFragment()

再建立一個class繼承FragmentStateAdapter

class PageAdapter(fragmentManager: FragmentManager, lifecycle: Lifecycle) :
    FragmentStateAdapter(fragmentManager, lifecycle) {

    var fragments: ArrayList<Fragment> = arrayListOf(
        FirstFragment(),
        SecondFragment(),
        ThirdFragment()
    )

    override fun getItemCount(): Int {
        return fragments.size
    }

    override fun createFragment(position: Int): Fragment {
        return fragments[position]
    }
}

回到MainActivity,連接adapter

val pageAdapter = PageAdapter(supportFragmentManager, lifecycle)
        viewPager2.adapter = pageAdapter

初步的效果

TabLayout

因爲除了滑動切換,我們還要可以點選切換的功能,就像瀏覽器的分頁
要再加入TabLayout,它是屬於google.android.material的一部分
所以前面的dependencies已經有加入了

接着也把他放到layout,放在viewpager2上
他也是一個viewgroup,視我們要幾個分頁,加入TabItem

<com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="1dp"
        app:layout_constraintBottom_toTopOf="@+id/viewPager2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline"
        app:tabSelectedTextColor="#389DC3"
        app:tabIndicatorColor="#389DC3"
        app:tabIndicatorHeight="5dp">

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="First" />

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Second" />

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Third" />
    </com.google.android.material.tabs.TabLayout>

記錄一下TabLayout有幾個應該會常用的屬性

• 選中分頁文字顏色 app:tabSelectedTextColor="#389DC3"
• Tab底線顏色 app:tabIndicatorColor
• Tab底線粗細 app:tabIndicatorHeight="5dp"

接著在程式中只需要用TabLayoutMediator傳入相對參數
並呼叫.attch()就可以與viewpager2連接,滑動二者都會對應改變

        val title: ArrayList<String> = arrayListOf("今天", "明天", "未來七天")

        TabLayoutMediator(tabLayout, viewPager2) { tab, position ->
            tab.text = title[position]
        }.attach()

參考
https://developer.android.google.cn/training/animation/screen-slide-2?hl=zh-cn
https://developer.android.com/reference/com/google/android/material/tabs/TabLayout
https://codertw.com/%E7%A8%8B%E5%BC%8F%E8%AA%9E%E8%A8%80/712473/